<!--
 * @Description: 通知公告
 * @Author:  zhangweigang
 * @Date: 2021-02-14 20:08:05
 * @LastEditTime: 2021-04-04 11:12:47
 * @LastEditors: zhangweigang
-->
<template>
  <div>
    <Header></Header>
    <curr-locat title="公告列表"></curr-locat>
    <div class="contain">
      <div>
        <el-form :inline="true" :model="searchBook" :rules="searchBookRules" ref="searchBookRef" class="demo-form-inline">
          <el-form-item label="公告标题：" prop="bookName">
            <el-input v-model="searchBook.bookName" :clearable="clearable" placeholder="请输入公告标题" @clear="contentClear"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 通知列表 -->
      <div v-if="!isData">
        <div v-for="(item, index) in ounceList" :key="index">
          <div class="row" @click="toDetail(item.id)">
            <img src="../../assets/image/dot.gif" alt="" />
            <div class="col-1">{{ item.noticeTitle }}</div>
            <div class="col-3">{{ item.createDate }}</div>
          </div>
        </div>
        <div class="pag">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </div>
      <!-- 未查询到数据 -->
      <div class="no_data" v-else>
        <div v-for="(item, index) in searchList" :key="index">
          <div class="row" @click="toDetail(item.id)">
            <img src="../../assets/image/dot.gif" alt="" />
            <div class="col-1">{{ item.noticeTitle }}</div>
            <div class="col-3">{{ item.createDate }}</div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { getAnnounceAllData, getAnnouncePagination } from '../../network/product.js';
export default {
  name: 'UploadList',
  data() {
    return {
      // 当前页数
      currentPage: 1,
      // 列表总数
      total: 0,
      // 默认分页参数
      pageNum: 1,
      pageSize: 10,
      searchBook: {
        bookName: ''
      },
      searchBookRules: {
        bookName: [{ required: true, message: '请输入公告名称', trigger: 'blur' }]
      },
      isData: false, // 搜索查询显示与隐藏
      clearable: true, // 是否显示清除按钮
      ounceList: [], // 列表list
      searchList: [] // 查询结果列表
    };
  },
  mounted() {
    // 获取列表总数
    this.getListData();
    // 获取列表数据
    this.getPageData(this.pageNum, this.pageSize);
  },
  methods: {
    /**
     * 当前页数的数据发生改变时触发
     * @pageSize 记录每一页显示数据条数
     */
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getPageData(this.pageNum, pageSize);
    },
    /**
     * 当前页显示数据发生改变时触发
     * @pageNum 记录当前页数
     */
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getPageData(pageNum, this.pageSize);
    },
    /**
     * 获取分页数据
     * @pageNum
     * @pageSize
     */
    getPageData(pageNum, pageSize) {
      getAnnouncePagination(pageNum, pageSize).then((res) => {
        if (res.data.code === 0) {
          // 获取留言列表
          this.ounceList = res.data.rows;
        } else {
          this.$message({
            showClose: true,
            message: '分页数据获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          });
          return;
        }
      });
    },
    /**
     * 查看详情页
     * @id 当前数据的ID
     */
    toDetail(id) {
      this.$router.push('/detail/' + id);
    },
    // 获取数据总数
    getListData() {
      getAnnounceAllData().then((res) => {
        if (res.data.code === 0) {
          // 获取总数
          this.total = res.data.total;
        } else {
          this.$message({
            showClose: true,
            message: '公告列表数据获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          });
          return;
        }
      });
    },
    // 清除当前内容,并显示列表
    contentClear() {
      this.isData = false;
    },
    // 搜索查询
    search() {
      this.$refs.searchBookRef.validate((valid) => {
        if (valid) {
          for (let i = 0; i <= this.ounceList.length - 1; i++) {
            // 输入的关键字与列表数据的标题对比
            if (this.searchBook.bookName == this.ounceList[i].noticeTitle) {
              this.searchList.push(this.ounceList[i]);
              this.isData = true;
            }
          }
          if (this.isData) {
            this.$message({
              showClose: true,
              message: '查询成功！',
              type: 'success',
              duration: 4000
            });
          } else {
            this.$message({
              showClose: true,
              message: '请输入完整公告标题进行查询！',
              type: 'error',
              duration: 4000
            });
          }
        } else {
          this.$message({
            showClose: true,
            message: '请输入公告标题！',
            type: 'error',
            duration: 2000
          });
          this.isData = false;
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.no_data {
  text-align: center;
  p {
    color: rgb(190, 190, 190);
  }
}
.row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdcdc;
  color: #333;
  cursor: pointer;
  font-size: 16px;
  div[class^='col-'] {
    padding: 15px;
  }
  &:hover div {
    color: red;
  }
  .col-1 {
    flex: 1;
    text-align: left;
  }
  .col-2 {
    flex: 1;
    text-align: left;
  }
  .col-3 {
    flex: 1;
    text-align: right;
  }
  .col-4 {
    flex: 2;
  }
}
.pag {
  margin-top: 20px;
}
</style>
